[[template "header" .]]
	<link href="/css/settings.css" rel="stylesheet">
	<style>
		ul.nav>li>a.active{
			color: red;
			font-weight: 800;
		}
	</style>
		<script>
			var app = angular.module("cron", ["ngNotify", "duScroll"])
				.value('duScrollOffset', 30);
			app.controller("MainCtrl", function($scope, $http, ngNotify, $document){
				// $scope.name = ;
				$scope.task = [[.Task]];
				$scope.fresh = [[.Fresh]]; // Is that newer
				// $scope.envVars = {GOPATH: "/User/skyblue"};
				$scope.envVars = $scope.task.environ || {};
				$scope.addEnv = function(e){
					$scope.envVars[e.name] = e.value;
					e.name = e.value = "";
				};
				$scope.envDel = function(name) {
					delete($scope.envVars[name]);
				};
                var ignoreOnce = false;
				$scope.save = function(){
                    if (ignoreOnce) {
                        ignoreOnce = false;
                        return;
                    }
					$scope.task['environ'] = $scope.envVars;
					var reqCall = $scope.fresh ? $http.post : $http.put;
					reqCall("/api/tasks", $scope.task)
						.success(function(res){
							ngNotify.set(res);
							$scope.fresh = false;
						})
						.error(function(res){
							ngNotify.set(res, 'error');
						});
				};
                $scope.delTask = function(){
                    ignoreOnce = true;
                    $http.delete("/api/tasks/"+$scope.task.name)
                        .success(function(res){
                            ngNotify.set("Deleted", "error");
                        })
                        .error(function(res){
                            alert(res);
                        })
                    //console.log("del task");
                    return false;
                };
			});
			$(function(){
				$('[data-toggle="tooltip"]').tooltip();
				$("#schedule-hint").click(function(){
					$("#modal-schedule").modal();
					return false;
				});
			});
		</script>

		<div class="container" ng-controller="MainCtrl">
			<div class="row">
				<div class="col-md-3">
				</div>
				<div class="col-md-9">
					<div class="settings">
						<form class="form" ng-submit="save()">
							<h2 ng-hide="fresh">{{task.name}}</h2>
							<section class="settings-section">
								<h2 class="small-title">General Setting</h2>
								<div class="form-group" ng-show="fresh">
									<div class="row">
										<div class="col-md-3">
											<label>Name</label>
											<input ng-model="task.name" class="input-name form-control" type="text" required>
										</div>
										<div class="col-md-9">
											<label>Description</label>
											<input ng-model="task.description" class="input-desc form-control" type="text">
										</div>
									</div>
								</div>
								<div class="form-group" ng-show="!fresh">
									<label>Description</label>
									<input ng-model="task.description" class="form-control" type="text">
								</div>
								<div class="form-group">
									<label>Schedule
										<a href="#" tabindex=-1 id="schedule-hint" data-toggle="tooltip" data-placement="top" title="[sec min hour day month week] click to see more">
											<span class="glyphicon glyphicon-question-sign"></span>
										</a>
										<i>Quick Set: every</i>
										<span class="btn sched-set" ng-click='task.schedule="@every 1h"'>hour</span>
										<span class="btn sched-set" ng-click='task.schedule="@every 1h30m"'>1h30m</span>
										<span class="btn sched-set" ng-click='task.schedule="@every 24h"'>day</span>
									</label>
									<input ng-model="task.schedule" class="input-schedule form-control" type="text" required>
								</div>
								<div class="form-group">
									<label>Command</label>
									<textarea ng-model="task.command" class="form-control" required placeholder="Linux Shell or Windows Batch command ..."></textarea>
								</div>
								<div class="form-group">
									<label>Directory</label>
									<input ng-model="task.dir" class="form-control" placeholder="Command run directory [optional]">
								</div>
							</section>
							<section class="settings-section">
								<h2 class="small-title">Environment Variables</h2>
								<ul class="settings-list-envvars">
									<li ng-repeat="(name, value) in envVars">
										<div class="settings-envvar">
											<div class="env-var-name">{{name}}</div>
											<div class="env-var-value">
												<input class="form-control" type="text" readonly="readonly" value="{{value}}">
											</div>
											<div class="env-var-action">
													<a href="#" ng-click="envDel(name)">
														<span class="glyphicon glyphicon-trash"></span>
													</a>
												<div class="tooltip">
												</div>
											</div>
										</div>
									</li>
								</ul>
								<div class="form">
									<div class="form-group">
										<div class="form-elem">
											<input type="text" ng-model="newEnv.name" class="form-control env-name" placeholder="Name">
										</div>
										<div class="form-elem">
											<input type="text" ng-model="newEnv.value" class="form-control env-value" placeholder="Value">
										</div>
										<div class="form-elem">
											<button ng-disabled="!newEnv.name" ng-click="addEnv(newEnv)" class="btn btn-info env-button">Add</button>
										</div>
									</div>
								</div>
							</section>
							<button type="submit" class="btn btn-success">Save</button>
                            <button ng-hide="fresh" ng-click="delTask()" class="btn btn-danger">Delete</button>
						</form>
					</div>
					<div du-scroll-container>
						<div ng-repeat="t in tasks" id="{{t.name}}" class="panel panel-info">
							<div class="panel-heading">
								<h4>{{t.name}} <small>{{t.schedule}}</small></h4>
							</div>
							<div class="panel-body">
								Command: {{t.command}}
							</div>
							<div class="panel-footer">
								{{t.description}}
							</div>
						</div>
					</div>
				</div>
		</div>
		<div class="modal fade" id="modal-schedule">
		  <div class="modal-dialog">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Schedule Help</h4>
			  </div>
			  <div class="modal-body">
				<p>* * * * * *  : every one second</p>
				<p>*/5 * * * * *  : every 5 second</p>
				<p>0 10 1 * * *  : 1 hour 10 minute every day</p>
				<p>@hourly : every hour</p>
			  </div>
			</div>
		  </div>
		</div>
[[template "footer" .]]
